<template>
    <v-layout row wrap justify-center id="wrapper">
        <v-flex xs12 md4 offset-md1 class="text-xs-center centered">
            <img id="logo" class="logo" src="~@/assets/logo.png" alt="electron-vue">
        </v-flex>
        <v-flex xs12 md6 class="text-xs-center centered">
            <img id="logo" class="logo" src="/static/v.png" alt="Vuetifyjs">
        </v-flex>
        <v-flex xs10 class="mt-3">
            <v-card>
                <v-card-text>
                    <p>Welcome to the Electron-vue + Vuetify template.</p>
                    <p>Vuetify is a progressive Material Design component framework for Vue.js. It was designed to
                        empower developers to create amazing applications. For more information on Vuetify, check out
                        the <a href="https://vuetifyjs.com" target="_blank">documentation</a>. If you have questions,
                        please join the official <a href="https://chat.vuetifyjs.com/" target="_blank" title="chat">discord</a>.
                        Find a bug? Report it on the github <a href="https://github.com/vuetifyjs/vuetify/issues"
                                                               target="_blank" title="contribute">issue board</a>.</p>
                    <p>Thank you for developing with Vuetify and I look forward to bringing more exciting features in
                        the future.</p>
                    <div class="text-xs-right">
                        <em>
                            <small>&mdash; John Leider</small>
                        </em>
                    </div>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn primary flat router to="/inspire">Continue</v-btn>
                </v-card-actions>
            </v-card>
        </v-flex>
        <v-flex xs10 class="mt-4">
            <system-information></system-information>
        </v-flex>
        <v-flex xs10 class="mt-4">
            <v-card>
                <v-card-title class="headline">Docs</v-card-title>
                <v-divider></v-divider>
                <v-card-actions class="pt-3 pb-3">
                    <v-spacer></v-spacer>
                    <v-btn class="link-btn" @click="open('https://vuejs.org/v2/guide/')">Vue</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn class="link-btn" @click="open('https://electron.atom.io/docs/')">Electron</v-btn>
                    <v-spacer></v-spacer>
                    <v-btn class="link-btn" @click="open('https://vuetifyjs.com')">Vuetify</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-flex>

        <v-flex xs10 class="mt-3">
            <v-card>
                <v-card-text>
                    <p>3更新提示:{{this.tips}}</p>
                </v-card-text>
                <v-card-text>
                    <p>更新进度:{{this.downloadPercent}}</p>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn @click="checkForUpdate">检查更新</v-btn>
                </v-card-actions>
            </v-card>
        </v-flex>
    </v-layout>
</template>

<script>
    import SystemInformation from './WelcomeView/SystemInformation'
    import {ipcRenderer} from 'electron'

    export default {
        name: 'welcome',
        components: {SystemInformation},
        data() {
            return {
                tips: '',
                downloadPercent: 0
            }
        },
        beforeDestroy() {
            // 组件销毁前移除所有事件监听channel
            // ipcRenderer.removeAll(['message', 'downloadProgress', 'isUpdateNow'])
        },
        methods: {
            open(link) {
                this.$electron.shell.openExternal(link)
            },
            checkForUpdate() {
                // 触发自动更新
                ipcRenderer.send('checkForUpdate')
                // 添加自动更新事件的监听
                ipcRenderer.on('message', (event, text) => {
                    console.log(text)
                    this.tips = text
                })
                ipcRenderer.on('downloadProgress', (event, progressObj) => {
                    console.log(progressObj)
                    this.downloadPercent = progressObj.percent || 0
                })
                ipcRenderer.on('isUpdateNow', () => {
                    ipcRenderer.send('isUpdateNow')
                })
            }
        }
    }
</script>

<style scoped>
    .centered {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo {
        max-width: 100%;
    }

    .link-btn {
        width: 150px;
    }
</style>
